<template>
  <div class="app-container">
    <div class="filter-container">
      <el-alert title="添加资讯" type="info" center :closable="false" />
      <el-form ref="form" :model="form" label-width="150px" :rules="rules" style="width:100%;margin-top:20px">
        <el-form-item label="标题" prop="title">
          <el-col :span="15">
            <el-input v-model="form.title" size="mini" style="width: 100%;" />
          </el-col>
        </el-form-item>

        <el-form-item label="资讯主图(比例4：3)" prop="imageUrl">
          <el-col :span="15">
            <el-upload class="avatar-uploader" action="http://xiaoshanxintangapi.xiansuoshe.com/api/upload/index"
              :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
              <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
            <el-button size="mini" type="primary" icon="el-icon-delete" @click="deleteImg" />
          </el-col>
        </el-form-item>

        <el-form-item label="标签">
          <el-col :span="15">
            <el-input v-model="form.label" size="mini" style="width: 100%;" />
          </el-col>
        </el-form-item>

        <el-form-item label="内容" prop="text">
          <el-col :span="24">
            <UE ref="ue" v-model="form.text" :default-msg="defaultMsg" :config="config" />
          </el-col>
        </el-form-item>

        <el-form-item>
          <el-button type="info" @click="$router.push('/checkmaster/page')">
            返回
          </el-button>
          <el-button type="primary" @click="onSubmit">
            保存
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<style>
.info {
  border-radius: 10px;
  line-height: 20px;
  padding: 10px;
  margin: 10px;
  background-color: #ffffff;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 158px;
  height: 128px;
  line-height: 128px;
  text-align: center;
}
.avatar {
  width: 158px;
  height: 128px;
  display: block;
}
</style>
<script>
import { addconsulting } from '@/api/consulting'
import UE from '../../components/ue/ue.vue';
export default {
  components: { UE },
  data () {
    return {
      imageUrl: '',
      form: {
        title: '',
        label: "",
        text: '',
        imageUrl: ""
      },
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
        ],
        imageUrl: [
          { required: true, message: '请上传图片', trigger: 'blur' },
        ],
        text: [
          { required: true, message: '请输入内容', trigger: 'blur' },

        ]

      },
      defaultMsg: '',
      config: {
        initialFrameWidth: null,
        initialFrameHeight: 350,
        serverUrl: "http://xiaoshanxintangapi.xiansuoshe.com/admin/Upload/type"
      }
    }
  },
  mounted () {
    this.$refs.ue.init();
  },
  methods: {
    handleAvatarSuccess (res, file) {
      if (res.code == 200) {
        this.form.imageUrl = res.url;
      } else {
        this.$notify({
          title: '失败',
          message: "上传失败",
          type: 'error',
          duration: 2000
        })
      }
    },

    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!isJPG) {
        // this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      // return isJPG && isLt2M;
    },

    deleteImg () {
      this.form.imageUrl = "";
    },
    getUEContent () {
      let content = this.$refs.ue.getUEContent();
      this.$notify({
        title: '获取成功，可在控制台查看！',
        message: content,
        type: 'success'
      });
      console.log(content)
    },
    onSubmit () {

      this.form.text = this.$refs.ue.getUEContent();

      this.$refs.form.validate(async (valid) => {
        if (valid) {
          const response = await addconsulting(this.form)
          if (response.code == 200) {
            this.$notify({
              title: '成功',
              message: response.message,
              type: 'success',
              duration: 2000
            })
            this.$router.push({ path: "/consulting/page" })
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  },
};
</script>